
<template>
    <div class="port-page">
        <!-- 顶部按钮 -->
        <!-- <el-button type="info" class="add btn" :loading="searchLoading" @click="search" icon="search">搜索</el-button> -->


<!--        <el-button type="danger" class="add btn" :disabled="multipleDeleteDisabled" icon="delete" @click="componentsShow('multipleDelete','')">批量删除</el-button>
-->
		<div class="but1">
        <router-link to="/home">
         	<el-button type="warning" size="small" class="add btn" style='margin-right: 5px;margin-left: 0px;'  icon="el-icon-menu">首页</el-button>
        </router-link>
        </div>
        <div class="quan">
          <div class="bqleft">
            <div class="bqfz" >标签分组</div>
            <ul>
              <li   v-for = "v in dataList" :class="v.class" @click = "bqlist2(v.fzmc)" >
                {{v.fzmc}}
                <!--<i class="el-icon-close del1" @click = "delbqfl(v.id)"></i>-->
                <!--<el-button  type="text" @click="componentsShow('fledit',v)" icon="el-icon-edit"></el-button>-->
                <!--<i class="el-icon-close del1" @click = "componentsShow('sq',v)"></i>-->
                <i class="el-icon-close del1" @click = "delbqfl(v.id)"></i>
                
              </li>
            </ul>
            <div class="tjlx" @click = "tianjia" v-if="tj">
              +点击添加类型
            </div>
            <div class="xglx" v-if= 'xiugai'>
              <el-input class="input" placeholder="" v-model="fz"  ></el-input>
              <el-button type="success" size="small" class="btn"  @click = "ad1" >保存</el-button>
            </div>
          </div>
          <div class="bqright">
            <div class="bqlist">
              <el-tag type="success" class="list1" closable  @close = "delbq(v.id)" v-for="v in bqList">{{v.bqmc}}</el-tag>
            </div>
          </div>
          <div class="hezi">
          <div class="tjlx1"  @click = "tianjia2"  v-if="tj2">+点击添加类型</div>
           <div class="xglx" v-if= 'xiugai2'>
              <el-input class="input" placeholder="" v-model="bq"  ></el-input>
              <el-button type="success" size="small" class="btn"   @click = "ad2()"  >保存</el-button>
            </div>
          </div>
        </div>

        <SqComponent v-if="portComponents.sq.toggle" @close="componentsHide" :params="portComponents.sq.params"></SqComponent>
    </div>
</template>
<script>
    import { mapState } from 'vuex'
    import qs from 'qs'
    import LoadingComponent from '../../../../components/loading'
    import AddComponent from './add'
    import EditComponent from './edit'
    import InfoComponent from './info'
    import SqComponent from './sq'
    import DeleteComponent from './del'
    export default {
        components: { LoadingComponent,SqComponent, EditComponent, DeleteComponent, AddComponent,InfoComponent },
		props: ['params'],
        data () {
            return {

            /*模糊搜索条件*/
               a1:true,
               vjsid:'', // 教室id
               fz:'',
               bq:'',
               vkeyword:'', // keyword
               tj:true,
               xiugai:false,
               tj2:false,
               xiugai2:false,
				multipleDelNum:'', //获取批量选择的数据
                dataList: [],  //表格数据
                bqList:[],
                comboxlist:[], //下拉框 动态的
                vcomautovalue:'',//下拉框name 动态的
                vcomgdvalue:'',//下拉框name 固定的

				/*动画加载*/
                isLoading: true,//动画加载
                searchLoading: false,//搜索按钮触发按钮动画
                /*分页属性设置*/
                layout: 'total, sizes, prev, pager, next, jumper',//组件布局
			    pageindex: this.$store.state.pageindex,//当前分页页码
                pagesizes: this.$store.state.pagesizes,//显示个数的选择器选项
                pagesize: this.$store.state.pagesize,//每页显示条目数
                total: 0,//总条数

                /*组件区域*/
                portComponents: {
                    /* 单行删除  */
                    singleDelete: {
                        type: 'singleDelete',
                        toggle: false,
                        params: '',
                        data: {
                            index: '',
                            type: 'single',
                            title: '此操作将删除该记录?, 是否继续?'
                        }
                    },
                    /* 批量删除 */
                    multipleDelete: {
                        type: 'multipleDelete',
                        toggle: false,
                        params: '',
                        data: {
                            index: '',
                            type: 'multiple',
                            title: '此操作将删除您选中的记录?, 是否继续?'
                        }
                    },
                    /* 添加 */
                    add: {
                        type: 'add',
                        toggle: false,
                        params: '',
                        jsid:'-1',
                        data: {}
                    },
                    /* 编辑 */
                    edit: {
                        type: 'edit',
                        toggle: false,
                        params: '',
                        data: {}
                    },
                    /* info */
                    info: {
                        type: 'info',
                        toggle: false,
                        params: '',
                        data: {}
                    },
	                  sq: {
	                    type: 'sq',
	                    toggle: false,
	                    params: '',
	                    data: {}
	                }
                },
                /*
                    prop :  接口参数名
                    label : 接口中文名
                    hide : 是否隐藏这一列
                    align : 这一列对齐顺序 ： left,right,center
                    headerAlign : 这一列表头对齐方式 ： left,right,center
                */
            }
        },
        created () {
           // this.vjsid =this.params.row.id;
            this.$store.dispatch('changeTitle','学生标签页设置');//修改title
            this.$store.dispatch('changeRouterIndex','/admin/bqy');//修改路由
            this.bqlist()
        },
        mounted () {
            //加载完成之后event
            this.isLoading = false;//动画结束
        },
        methods:{
          delbq(id){
          	this.$confirm('此操作将删除所选标签, 是否继续?', '提示', {
    				 confirmButtonText: '确定',
    				 cancelButtonText: '取消',
    				 type: 'warning'
    			 }).then(() => {
          	var logininfo = JSON.parse(localStorage.logininfo);
             var params2 = qs.stringify({
                    ids:id+'',
                      xxid:logininfo.xxid+'',
               })
             //执行
                 this.axios.post(this.$store.state.api + 'bq/deletepl',  params2 )
                 .then(res => {
                  this.bqlist()
                  this.bqlist2(this.fzmc1)
                 })
                 }).catch(res => {
				})
          },
          delbqfl(id){
          	this.$confirm('此操作将删除所选标签分组, 是否继续?', '提示', {
    				 confirmButtonText: '确定',
    				 cancelButtonText: '取消',
    				 type: 'warning'
    			 }).then(() => {
            var logininfo = JSON.parse(localStorage.logininfo);
             var params2 = qs.stringify({
                      ids:id+'',
                      yhid: logininfo.id+'',
					  xxid: logininfo.xxid+''
               })
             //执行
                 this.axios.post(this.$store.state.api + 'bqfl/deletepl',  params2)
                 .then(res => {
                 this.bqlist()
                  this.bqlist2(this.fzmc1)
                 })
                 }).catch(res => {
					this.searchLoading = false;
				})
          },
          tianjia(){
    				this.tj = false;
    				this.xiugai = true;
    			},
    			tianjia2(){
    				this.tj2 = false;
    				this.xiugai2 = true;
    			},
          ad1(){
          	 if(!this.fz) {
          	 	this.tj = true;
        		this.xiugai = false;
				this.$message.warning('请填写标签分组');
				this.$store.state.loading = false;
				return;
			} 
          	var logininfo = JSON.parse(localStorage.logininfo);
             var params2 = qs.stringify({
                fzmc:this.fz,
                      xxid:logininfo.xxid,
               })
             //执行
                 this.axios.post(this.$store.state.api + 'bqfl/insert',  params2 )
                 .then(res => {
                        this.tj = true;
        				this.xiugai = false;
		                this.bqlist()
		                this.fz = ""
                 }).catch(res => {
					this.searchLoading = false;
				})
          },
          ad2(){
          	if(!this.bq) {
					this.$message.warning('请填写标签');
					this.$store.state.loading = false;
					return;
				} 
            var logininfo = JSON.parse(localStorage.logininfo);
             var params2 = qs.stringify({
                      fzmc:this.fzmc1,
                      bqmc:this.bq,
                      xxid:logininfo.xxid,
               })
             //执行
                 this.axios.post(this.$store.state.api + 'bq/insert',  params2 )
                 .then(res => {
                  this.tj2 = true;
          				this.xiugai2 = false;
                  this.bqlist2(this.fzmc1)
                  this.bq =""
                 }).catch(res => {
					this.searchLoading = false;
				})
          },
          bqlist(){
          	var logininfo = JSON.parse(localStorage.logininfo);
             var params2 = qs.stringify({
                  xxid:logininfo.xxid,
               })
             //执行
                 this.axios.post(this.$store.state.api + 'bqfl/list2',  params2 )
                 .then(res => {
                 	console.log(res,'555')
                  let data = res.data.data;
                  let list = data.list;
                  this.dataList = list;
                  this.searchLoading = false;
                 }).catch(res => {
					this.searchLoading = false;
				})
          },
          bqlist2(fzmc){
          	this.tj2=true
              // var fzmc2 = fzmc
            // this.ys1 = !this.ys1
            var logininfo = JSON.parse(localStorage.logininfo);
             var params2 = qs.stringify({
                  fzmc:fzmc,
                      xxid:logininfo.xxid,
               })
             //执行
                 this.axios.post(this.$store.state.api + 'bq/list2',  params2 )
                 .then(res => {
                  this.fzmc1 = fzmc
                  let data = res.data.data;
                  let list = data.list;
                  this.bqList = list;
                  this.searchLoading = false;
                  for(var i=0;i<=this.dataList.length; i++){
                    if(fzmc==this.dataList[i].fzmc){
                      this.dataList[i].class = "back"
                    }else{
                      this.dataList[i].class = "red"
                    }
                  }
                 }).catch(res => {
					this.searchLoading = false;
				})
          },
          /* 组件的弹框  */
          componentsShow (type,data) { //显示组件
              for ( let i in this.portComponents ) {
                  if (type == this.portComponents[i].type) {
                      this.portComponents[i].toggle = true;
                      this.portComponents[i].params = data;
                      if (type == 'add') {
                          this.portComponents[i].params  =  this.vjsid;
                      }else if (this.portComponents[i].data.type == 'single') {
                          this.portComponents[i].data.index = data.row.id
                      }else if(this.portComponents[i].data.type == 'multiple'){
                          this.portComponents[i].data.index = this.multipleDelNum;
                      }else{
                          return;
                      }
                      return;
                  }
              }
          },
          componentsHide (setting) { //关闭组件
              for ( let i in this.portComponents ) {
                  if (setting.type == this.portComponents[i].type) {
                      this.portComponents[i].toggle = false;
                      this.tj2=false
                      if (!setting.cancel) {
                      this.bqlist()
                      }
                      return;
                  }
              }
          // }

        }
        },
        computed: {
            ...mapState([
                'api'//域名
            ]),
            multipleDeleteDisabled () {
                if (this.multipleDelNum) {
                    return false;
                }else{
                    return true
                }
            }
        }
    }
</script>

<style lang="less" scoped>
// .ys1{
//   background: #ccc;
//   // color: #fff;
// }
// .ys2{
//   background: red;
//   color: #fff;
// }
.red{
  background: #fff;
}
.back{
  color: #fff;
  background: red;
}
.port-page {
	//sonpage 子页面list begin
	 position: absolute;
	top:100px;left:0;
	width: 100%;
	height: 100%;
	background: #E8EDF0;
	z-index: 99;
	padding-left: 15px;
//sonpage 子页面list end
		font-size:12px;
		 .but1{
			width: 100%;
			height: 50px;
			line-height: 50px;
			float: left;
		}
    .quan{
      width: 100%;
      // border: 1px solid red;
      /*margin-top: 50px;*/
      height: 100%;
      .bqleft{
				padding-bottom: 50PX;
				text-align: center;
				width: 23%;
				float: left;
				border: 1px solid #CCCCCC;
				.tjlx{
					width: 150px;
					border: 1px solid #000;
					height: 40px;
					line-height: 35px;
					font-weight: 700;
					border-radius: 5px;
					color: #000;
					font-size: 15px;
					text-align: center;
					margin: 10px auto;
				}
				.bqfz{
					width: 100%;
					height: 50px;
					float: left;
					background:#409EFF;
					color: white;
					text-align: center;
					line-height: 50px;
					font-size: 25px;
					font-weight: 700;
				}
				
				.input{
					width: 50%;
				}
				ul{
					width: 100%;
					border-radius: 15px;
					// margin-top: 20px;
					// border: 3px solid #000;
					padding-top: 50px;
					padding-bottom:  10px;
					li{
						width: 100%;
                        font-size: 16px;						
						height: 50px;
						/*border-radius: 5px;*/
						margin: 0 auto;
						line-height: 50px;
						border-bottom: 1px solid #CCCCCC;
            /*margin-top: 10px;*/
            position: relative;
            .del1{
              font-size: 20px;
              position: absolute;
              top: 5px;
              right: 5px;
            }
					}
					// li:hover{
					// 	background-color: red;
					// 	color: #fff;
					// }
				}
			}
			.bqright{
				width: 76%;
				float: right;
				top:0;
				text-align: center;
				// margin-left: 30%;
				border: 1px solid #CCCCCC;
				padding-bottom: 50PX;
				
				.bqlist{
					width: 100%;
					height: 100%;
					border-radius: 15px;
					/*// margin-top: 20px;
					// border: 3px solid #000;*/
					/*padding-top: 10px;*/
				    /*display: flex;*/
					/*padding-bottom:  10px;*/
					/*margin-top: 20px;*/
					.list1{
						/*width: 20%;*/
						/*height: 30px;*/
						float: left;
						line-height: 30px;
						margin-left: 2%;
						margin-top: 20px;
						margin-bottom: 20px;
					}
				}
			}
			.hezi{
				width: 76%;
				height: 50px;
				float: right;
				margin: 0 auto;
			.tjlx1{
				width: 150px;
					border: 1px solid #000;
					height: 40px;
					line-height: 40px;
					font-weight: 700;
					border-radius: 5px;
					color: #000;
					font-size: 15px;
					text-align: center;
					margin: 5px auto;
			}
			.input{
					width: 100px;
				}
				.xglx{
					width: 180px;
					height: 40px;
					line-height: 40px;
					margin: 0 auto;
				}
			}
    }

}
</style>
